<!--
 * @Author: swc shanwenchao12138@163.com
 * @Date: 2024-12-10 14:58:13
 * @LastEditors: swc
 * @LastEditTime: 2024-12-11 13:35:27
 * @FilePath: \xf\src\components\custom\homePage\homeCpt\o-message-list\msgDetailModel\msgBroadcast.vue
 * @Description: 
 * @Version: 2.0
 * @Autor: swc
-->
<template>
  <!-- UI推荐 -->
  <!-- https://navnav.co/dialog-modal -->
  <o-modal
    v-model="isShow"
    :title="config.modalTitle || $srv.getI18nByValue('消息详情')"
    :size="config.modalSize || [560, 420]"
    :mask="true"
    :tap-close="false"
    :show-footer="true"
    @on-ok="confirm"
    @on-close="cancel"
  >
    <div slot="content" class="msgBroadcast clearfix">
      <div class="msg-header">
        <h2>{{ config.msgConfig.title }}</h2>
      </div>
      <div class="msg-content">
        <div class="emergency" v-if="config.msgConfig.category === 0">
          <p>{{ config.msgConfig.content }}</p>
        </div>
      </div>
      <div class="msg-footer"></div>
    </div>
  </o-modal>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import oModal from '@/components/base/modal/o-modal/index.vue';
import { Tsrv, T_srv, ts, tvs, ifs } from '@/services';

interface config {
  modalTitle?: string;
  modalSize?: Array<number>;
  msgConfig: ts.T_msgBroadcast;
}

@Component({
  components: {
    oModal
  }
})
export default class oMsgBroadcast extends Vue {
  /**
   * props
   */
  @Prop() config: config;

  @Prop() id: number;

  /**
   * data
   */
  private isShow: boolean = false;

  created() {
    this.show();
  }

  mounted() {}

  public show() {
    this.isShow = true;
  }

  public hide() {
    this.isShow = false;
  }

  public confirm() {
    this.$bus.$emit(`modal_${this.id}`, '确定返回值');
    this.hide();
  }

  public cancel() {
    this.$bus.$emit(`modal_${this.id}`);
    this.hide();
  }
}
</script>

<style lang="scss" scoped>
.msgBroadcast {
  padding: 0 20px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .msg-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;

    p {
      text-indent: 2em;
      // line-height: 1.5;
      // color: #333;
    }
    // .emergency {}
  }
}
</style>
